<template>
	<view>
		<!-- 日历 -->
		
		<view class="h_content">
			<view class="h_rili">
				<view class="h_date">
					<view class="h_L">
						<view class="h_year">
							<u-icon name="arrow-left" color="#2979ff" :bold="true" size="28rpx" index="year1" @click="iconClick"></u-icon>
							<text>{{thisYear}}年</text>
							<u-icon name="arrow-right" color="#2979ff" :bold="true" size="28rpx" index="year2" @click="iconClick"></u-icon>
						</view>
						<view class="h_month">
							<u-icon name="arrow-left" color="#2979ff" :bold="true" size="28rpx" index="month1" @click="iconClick"></u-icon>
							<text>{{thisMonth}}月</text>
							<u-icon name="arrow-right" color="#2979ff" :bold="true" size="28rpx" index="month2" @click="iconClick"></u-icon>
						</view>
					</view>
					<view class="h_today" v-if="todayShow" @click="todayClick">返回今天</view>
				</view>
				<view class="h_week">
					<text v-for="(weekItem,weekIndex) in weekList" :key="weekIndex">{{weekItem}}</text>
				</view>
				<view class="h_days">
					<view v-for="(dayItem,dayIndex) in dayList" :key="dayIndex" :class="dayItem.status==0 ? 'h_day h_disabled' : (dayItem.status==2 ? 'h_day h_active' : 'h_day')" @click="upDate(dayItem.day,dayItem.status)">
						<view class="h_t1">{{dayItem.day ? dayItem.day : ''}}<text>{{dayItem.featival}}</text></view>
						<view class="h_t2">{{dayItem.status_text ? dayItem.status_text : ''}}</view>
						<!-- <image src="/static/qd_gou@2x.png" mode="widthFix"></image> -->
					</view>
				</view>
			</view>
			
			<view class="h_Desc">
				<view class="h_box">
					<view class="h_t1">用户：</view>
					<view class="h_t2">{{info.username}}</view>
				</view>
				<view class="h_box">
					<view class="h_t1">月份：</view>
					<view class="h_t2">{{info.month}}</view>
				</view>
				<view class="h_box">
					<view class="h_t1">本月假期：</view>
					<view class="h_t2">{{info.month_holiday}}<text>天</text></view>
				</view>
				<view class="h_box">
					<view class="h_t1">已选假期：</view>
					<view class="h_t2">{{info.number}}<text>天</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getUserMonthDate, postSetDate, postCancel} from "@/api"
	export default {
		data() {
			return {
				thisYear: new Date().getFullYear(),		//当前年份
				thisMonth: new Date().getMonth()+1,		//当前月份
				thisWeek: new Date().getDay(),			//当前星期几
				thisDay: new Date().getDate(),			//今天
				weekList: ['日', '一', '二', '三', '四', '五', '六'],
				dayList: [],
				todayShow:false,
				info:[],
				username:'',
			}
		},
		onLoad() {
			let that = this;
			that.getUserMonthDate();
			// that.createDayList();
		},
		methods: {
			iconClick(e){
				// 年-
				if(e == "year1"){
					this.thisYear--
				}
				// 年+
				if(e == "year2"){
					this.thisYear++
				}
				// 月-
				if(e == "month1"){
					if(this.thisMonth > 1){
						this.thisMonth--
					}else{
						return false
					}
				}
				// 月+
				if(e == "month2"){
					if(this.thisMonth < 12){
						this.thisMonth++
					}else{
						return false
					}
				}
				let nowYear = new Date().getFullYear();		//当前年份
				let nowMonth = new Date().getMonth()+1;		//当前月份
				if(this.thisMonth == nowMonth && nowYear==this.thisYear){
					this.todayShow=false
				}else{
					this.todayShow=true
				}
				this.getUserMonthDate()
			},
			// 返回今天
			todayClick(){
				let date = new Date();
				this.thisYear = date.getFullYear();		//当前年份
				this.thisMonth = date.getMonth()+1;		//当前月份
				this.todayShow=false
				this.getUserMonthDate()
			},
			upDate(e,status){
				console.log(e,status)
				let that = this;
				let thisMonth = that.thisMonth
				if(thisMonth<10) thisMonth = '0'+thisMonth
				if(e<10) e = '0'+e
				let date = that.thisYear+'-'+thisMonth+'-'+e
				if(status == 1){
					uni.showModal({
						title:'提示',
						content:'是否确认设置'+that.thisYear+'/'+that.thisMonth+'/'+e+'休息？',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								postSetDate({"date": date,}).then(res => {
									const { code, data } = res;
									if(code === 1){
										that.toast("修改成功")
										setTimeout(function(){
											that.getUserMonthDate()
										},1000)
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
				if(status == 2){
					uni.showModal({
						title:'提示',
						content:'是否取消'+that.thisYear+'/'+that.thisMonth+'/'+e+'休息？',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								postCancel({"date": date,}).then(res => {
									const { code, data } = res;
									console.log(code,1111)
									if(code === 1){
										that.toast("修改成功")
										setTimeout(function(){
											that.getUserMonthDate()
										},1000)
										
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			},
			getUserMonthDate(){
				let that = this;
				let month = that.thisYear+'-'+that.thisMonth+'-'+1
				getUserMonthDate(month).then(res => {
					let data = res.data;
					that.info = data;
					that.username = data.username;
					let dateStatus = data.dateStatus;
					
					dateStatus = Array.from(Object.values(dateStatus));
					that.createDayList(dateStatus);
					// console.log(data,22222222);
				})
			},
			createDayList(dateStatus) {
				// console.log(this.thisDay)
				let that = this
				let year = this.thisYear;
				let month = this.thisMonth;
			    // const count = this.getDayNum(month, year)
			    let _week = new Date(year + '/' + month + '/1').getDay();
			    // let list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
				let list = []
				// let Status = [...dateStatus]
				// console.log(dateStatus,1111111111);
				var feativals = {'1-1': '元旦','2-14': '情人','3-8': '妇女','3-12': '植树','4-1': '愚人','5-1': '劳动','5-4': '青年','6-1': '儿童','7-1': '建党','8-1': '建军','9-10': '教师','10-1': '国庆','12-25': '圣诞'}

			    for (let i = 0; i < dateStatus.length; i++) {
					let status = dateStatus[i]
					let status_text = status == 1 ? '可休' : (status == 2 ? that.username : (status == 0 ? '不可休' : ''));
					let day = i+1
					let time = month+'-'+day
					let featival = feativals[time] ? feativals[time] : ''
					// console.log(time,featival);return
						list.push({
							day:day,
							status:status,
							status_text:status_text,
							featival:featival
						})
					
			    }
			    for (let i = 0; i < _week; i++) {
			        list.unshift({
						day:null,
						status:null,
						status_text:null
					})
			    }
				// console.log(list);return;
				this.dayList = list
				console.log(list)
			    // return list;
			},
			//计算传入月份有多少天
			// getDayNum(month, year) {
			//     let dayNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
			
			//     if ((year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0)) {
			//         dayNum[1] = 29;
			//     }
			//     return dayNum[month - 1]
			// },
		}
	}
</script>

<style lang="scss">
.h_content{
	padding: 10rpx 0px;
	.h_rili{
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		// padding: 0 48rpx;
		margin-bottom: 40rpx;
		.h_date{
			padding: 12rpx 0;
			font-size: 30rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #3D3D3D;
			text-align: center;
				height: 50rpx;
			// border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			display: flex;align-items: center;
			justify-content: space-between;
			.h_L{
				display: flex;
				align-items: center;
				.h_year,.h_month{
					margin: 0 30rpx;
					display: flex;
					&>text{
						margin: 0 20rpx;
					}
				}
			}
			.h_today{
				margin-right: 30rpx;
				border-radius: 4rpx;
				color: #2979ff;font-size: 26rpx;
				border: 2rpx solid #2979ff;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				width: 120rpx;
			}
		}
		.h_week{
			// margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
			background: rgb(251, 234, 151);
			text{
				padding: 20rpx 0;
				width: calc(100% / 7);
				text-align: center;
				font-size: 30rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #444444;
				position: relative;
				&::after{
					content: '';
					position: absolute;
					left: 0%;bottom: -3rpx;
					width: 100%;
					height: 4rpx;
					background: none;
				}
				&.h_active{
					&::after{
						background: #FF96B5;
					}
				}
			}
		}
		.h_days{
			display: flex;
			flex-wrap: wrap;
			.h_day{
				width: calc(100% / 7);
				height: 100rpx;
				padding: 10rpx;
				box-sizing: border-box;
				// line-height: 100rpx;
				// text-align: center;
				// margin:0 40rpx 40rpx 0;
				// border-radius: 16rpx 16rpx 16rpx 16rpx;
				
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
				// line-height: 50rpx;
				position: relative;
				
				box-shadow: inset -1rpx -1rpx rgba(0,0,0,0.08);
				
				image{
					display: none;
					width: 26rpx;
					position: absolute;
				}
				// text{display: block;}
				&.h_active{
					background: #2d7ffd;
					box-shadow: inset -1rpx -1rpx #fff;
					color: #fff;
					image{
						top: 12rpx;left: 12rpx;
						display: block;
					}
				}
				&.h_disabled{
					color: #999;
				}
				.h_t1{
					font-weight: bold;
					text{
						color: rgb(255, 30, 16);
						font-weight: normal;
						font-size: 24rpx;
						margin-left: 5rpx;
					}
				}
				.h_t2{font-size: 24rpx;}
			}
			#today{
				box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0,0,0,0.08);
				font-size: 20rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FF96B5;
			}
		}
	}
	
	.h_Desc{
		padding: 20rpx;
		.h_box{
			display:flex;
			margin-bottom: 6rpx;
			.h_t1{
				font-size: 28rpx;
				width: 180rpx;
				color: #777;
			}
			.h_t2{
				width: calc(100% - 180rpx);
				font-size: 28rpx;
				color: rgb(255, 30, 16);
				text{color: #777;}
			}
		}
	}
}
	
</style>
